<!-- 首页新闻公告 -->
<style lang="scss">
.announcement-list {
  padding: 0 20px 0 16px;
  .listview-body {
    padding-top: 3px;
    .list-item {
      position: relative;
      height: 40px;
      line-height: 13px;
      padding: 12.5px 0 12.5px 16px;
      cursor: pointer;
      font-size: 14px;
      color: #282f50;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      overflow: hidden;
      border-top: 1px transparent;
      border-bottom: 1px dashed #e4e4f0;
      border-radius: 6px;
      transform: translateY(-3px);
      &:last-of-type {
        border-bottom: none;
      }
      &:hover {
        color: #2f6bcf;
      }
      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 100%;
        opacity: 0.5;
        background: #7d7ea2;
        position: absolute;
        left: 0px;
        top: 17px;
      }
      &.unread {
        color: #333333;
      }
      &.unread::before {
        background: #7d7ea2;
      }
      .date {
        position: absolute;
        right: 0;
        font-size: 14px;
        color: #7d7ea2;
      }
    }
  }
  .je-vue-pagebar {
    display: none;
  }
}
</style>
<template>
  <div class="announcement-list">
    <!-- 列表 -->
    <je-listview
      ref="list"
      v-loading="loading"
      :total-count="totalCount"
      :page-size="1000"
      :empty-height="emptyHeight"
      :item-height="itemHeight"
      @buildData="buildData"
    >
      <!-- 数据项 -->
      <div
        slot="listitem"
        v-for="(item, index) of data"
        :key="index"
        :class="{ unread: item.SY_FUNCEDIT != '0' }"
        @click="preview(item, index)"
        class="list-item"
      >
        {{ item.NOTICE_TITLE }}
        <span class="date">{{ formatDate(item.SY_CREATETIME) }}</span>
      </div>
    </je-listview>
    <!-- 详情页 -->
    <news-info ref="info" @refreshitem="refreshItem" />
  </div>
</template>
<script>
import ListView from "../../../../components/listview/listview.vue";
import NewsInfo from "./news_info.vue";
import Util from "../../util/util.js";

export default {
  name: "NewsList",
  components: { "je-listview": ListView, NewsInfo },
  props: {
    type: String,
    autoload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      type: this.type, // 新闻类型
      autoload: this.autoload, // 自动加载
      loading: true, // 加载中
      data: [], // 数据
      totalCount: 0, // 总条数，绑定分页条,
      emptyHeight: 120, // 空数据的容器高
      itemHeight: 28, // 数据项高
    };
  },
  mounted() {
    // 初始化加载数据
    this.autoload && this.load();
  },
  methods: {
    /**
     * 格式化日期
     */
    formatDate(date) {
      return Ext.Date.format(Ext.Date.parse(date, "Y-m-d H:i:s"), "m/d");
    },
    /**
     * 列表
     */
    getList() {
      return this.$refs.list;
    },
    load() {
      this.getList().load();
    },
    /**
     * 加载数据
     */
    buildData(pageInfo) {
      const me = this;
      me.loading = true;
      const params = {
        tableCode: "JE_SYS_NOTICE",
        whereSql: ` AND NOTICE_QY='1' AND NOTICE_NOTICETYPE_CODE = '${this.type}'`,
        orderSql: "ORDER BY SY_CREATETIME DESC",
        j_query: Ext.encode({
          custom: [
            { type: "=", code: "NOTICE_NOTICETYPE_CODE", value: this.type },
            { type: "=", code: "NOTICE_QY", value: "1" },
          ],
          order: [{ type: "desc", code: "SY_CREATETIME" }],
        }),
        funcCode: "JE_SYS_NOTICE",
        funcEdit: true,
        page: pageInfo.page,
        limit: pageInfo.limit,
        start: pageInfo.start,
      };
      JE.ajax({
        url: JE.getUrlMaps("je.core.load"),
        params,
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          me.data = data.rows;
          me.totalCount = data.totalCount;
          me.loading = false;
          /* 假数据 */
          // me.data = [
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          //   {
          //     NOTICE_TITLE: "你的英语六级成绩已导入系统可以查询",
          //     SY_CREATETIME: "2018-11-11",
          //   },
          // ];
          // me.totalCount = 7;
        },
      });
    },
    /**
     * 预览
     */
    preview(item, index) {
      const me = this;
      if (item.SY_FUNCEDIT != "0") {
        Util.doReadMark("news", item.JE_SYS_NOTICE_ID);
        item.SY_FUNCEDIT = "0";
        JE.CoreUtil.doNotice("read", item, (obj) => {
          item.NOTICE_YDL = obj.NOTICE_YDL;
        });
        this.$set(this.data, index, item);
      }
      me.$refs.info.show(item, index);
    },
    /**
     * 刷新数据项
     */
    refreshItem(oldItem, newItem, index) {
      oldItem = Ext.apply(oldItem, newItem);
      this.$set(this.data, index, oldItem);
    },
  },
};
</script>
